<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
	</div>
	<script src="./js/vue.js" type="text/javascript" charset="utf-8" ></script>
	<script type="text/javascript">
		/**
			Vue过滤器 案例 用过滤器格式化时间
		*/
		// Vue.filter('format', function(value, args) {
		// 	if (args == 'yyyy-MM-dd') {
		// 		var ret = '';
		// 		ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
		// 		return ret; 
		// 	}
		// 	return value
		// })

		// 完整的日期格式化代码
		Vue.filter('format', function(value, arg) {
			function dateFormat(date, format) {
			    if (typeof date === "string") {
			        var mts = date.match(/(\/Date\((\d+)\)\/)/);
			        if (mts && mts.length >= 3) {
			            date = parseInt(mts[2]);
			        }
			    }
			    date = new Date(date);
			    if (!date || date.toUTCString() == "Invalid Date") {
			        return "";
			    }
			    var map = {
			        "M": date.getMonth() + 1, //月份 
			        "d": date.getDate(), //日 
			        "h": date.getHours(), //小时 
			        "m": date.getMinutes(), //分 
			        "s": date.getSeconds(), //秒 
			        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
			        "S": date.getMilliseconds() //毫秒 
			    };

			    format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
			        var v = map[t];
			        if (v !== undefined) {
			            if (all.length > 1) {
			                v = '0' + v;
			                v = v.substr(v.length - 2);
			            }
			            return v;
			        } else if (t === 'y') {
			            return (date.getFullYear() + '').substr(4 - all.length);
			        }
			        return all;
			    });
			    return format;
			}
			return dateFormat(value, arg);
		})
		var vm = new Vue({
			el: "#app",
			data: {
				date: new Date()
			}
		});
	</script>
</body>
</html>